// 彩票设置
<template>
  <div class="app-container">

    <div v-if="setting">
      <div v-for="(item,key) in setting" :key="`settingItemKey${key}`">

        <el-table :data="item" v-loading="loading" element-loading-text="加载中" size="small" header-cell-class-name='tableHeader' border stripe fit highlight-current-row>
          <el-table-column type="index" :label="key" align="center" min-width="50">
          </el-table-column>
          <el-table-column prop="game_name" label="名称" align="center" min-width="50">
          </el-table-column>
          <el-table-column prop="" label="开启" align="center" min-width="80">
            <template slot-scope="scope">
              <el-switch active-value='1' inactive-value='0' v-model="scope.row.open" @change="cellChange('open',scope.$index,scope.row)"> </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="" label="白天" align="center" min-width="80">
            <template slot-scope="scope">
              <el-input-number size="small" v-model="scope.row.daytime_period_close" :min=0 :disabled="scope.row.open === 0" @change="cellChange('daytime_period_close',scope.$index,scope.row)" :class="`${scope.row[`daytime_period_close_highlight_class`]}`"></el-input-number> 秒
            </template>
          </el-table-column>
          <el-table-column prop="" label="夜场" align="center" min-width="80">
            <template slot-scope="scope" v-if="scope.row.has_night_period === 1">
              <el-input-number size="small" v-model="scope.row.nighttime_period_close" :min=0 :disabled="scope.row.open === 0" @change="cellChange('nighttime_period_close',scope.$index,scope.row)" :class="`${scope.row[`nighttime_period_close_highlight_class`]}`"></el-input-number> 秒
            </template>
          </el-table-column>
        </el-table>

      </div>

      <el-row class="btn-group-submit" style="margin:0">
        <el-tag type="danger" size="small">
          *修改后将在下一期生效
        </el-tag>
        <el-button @click="onReset">重置</el-button>
        <el-button type="primary" :loading="loading" @click.native.prevent="onSubmit">修改</el-button>
        <el-button @click="getSetting">刷新</el-button>
      </el-row>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      params: [],
      setting: null,
    }
  },
  computed: {},
  created() {
    this.getSetting()
  },
  methods: {
    // 查询设置
    getSetting() {
      this.loading = true
      this.$store.dispatch('GetGameSettings', {}).then(response => {
        this.loading = false
        if (response.lottery_setting) {
          this.setting = {}
          for (const key in response.lottery_setting) {
            if (response.lottery_setting.hasOwnProperty(key)) {
              const element = response.lottery_setting[key]
              this.setting[key] = []
              for (const k in element) {
                if (element.hasOwnProperty(k)) {
                  const row = element[k]
                  row['game_code'] = k
                  row['init'] = JSON.parse(JSON.stringify(row)) // 保存自身初始值 ,用于金额判断
                  // 高亮样式
                  row[`open_highlight_class`] = ''
                  row[`daytime_period_close_highlight_class`] = ''
                  row[`nighttime_period_close_highlight_class`] = ''
                  this.setting[key].push(row)
                }
              }
            }
          }
        }
        this.params = []
        // console.log(this.setting)
      })
    },

    // 表格input的变化
    cellChange(...args) {
      this.$nextTick(_ => {
        // 获取回调后的值才是最新的值
        const [key_name, rowIndex, row] = args
        const valueInit = row.init[key_name] // 初始值,
        const valueInput = row[key_name] // 输入值
        // console.log(valueInit, valueInput)
        if (parseFloat(valueInput) !== parseFloat(valueInit)) {
          // highlight
          row[`${key_name}_highlight_class`] = 'hightlight'
          // 保存修改的item
          this.params[`${row.game_code}-${key_name}`] = row
        } else {
          row[`${key_name}_highlight_class`] = ''
          delete this.params[`${row.game_code}-${key_name}`] // 删除未修改行
        }
        // console.log(Object.keys(this.params).length)
      })
    },

    // 保存设置
    onSubmit() {
      // console.log(this.params);
      const ob = {}
      for (const k in this.params) {
        if (this.params.hasOwnProperty(k)) {
          const row = this.params[k]
          const [game_code, key_name] = k.split('-')
          if (typeof ob[game_code] === 'undefined') {
            ob[game_code] = {}
          }
          ob[game_code]['open'] = row.open
          ob[game_code][key_name] = row[key_name]
        }
      }
      // console.log(ob, Object.values(ob).length);
      const params = Object.values(ob)
      if (params.length <= 0) {
        // 没有修改
        this.$message({
          message: '没有变化的条目!',
          type: 'warning',
        })
      } else {
        this.loading = true
        this.$store
          .dispatch('SetGameSettings', {
            params: ob,
          })
          .then(response => {
            this.loading = false
            if (parseInt(response) > 0) {
              this.$message({
                message: '修改成功!',
                type: 'success',
              })
              // 重载数据
              this.getSetting()
            } else {
              this.$message({
                message: '修改失败!',
                type: 'error',
              })
            }
          })
          .catch(error => {
            this.loading = false
            console.log(error)
            // this.$message({
            //   message: error.message,
            //   type: "warning"
            // });
          })
      }
    },

    // 重置为初始数据
    onReset() {
      // console.log(this.setting)

      for (const key in this.setting) {
        if (this.setting.hasOwnProperty(key)) {
          const part = this.setting[key]
          part.forEach(element => {
            // 恢复表格
            element.open = element.init.open
            element.daytime_period_close = element.init.daytime_period_close
            element.nighttime_period_close = element.init.nighttime_period_close
            // 清除高亮样式
            element[`open_highlight_class`] = ''
            element[`daytime_period_close_highlight_class`] = ''
            element[`nighttime_period_close_highlight_class`] = ''
            // 清除params
            this.params = []
          })
        }
      }
      this.$message({
        message: '数据已重置!',
        type: 'success',
      })
    },
  },
  watch: {},
}
</script>

<style scoped>

</style>

